/**
 * @author 杨执信
 * @page 首页
*/
import Head from 'next/head'
import Link from 'next/link'
import { Header, Author, Advert, Footer } from '../components/index'
import { Row, Col, List } from 'antd'
import React, { useState } from 'react'
import { CalendarOutlined, FolderOutlined, FireOutlined } from '@ant-design/icons'
import { get, servicePath } from '../utils'
import { rTime } from './functions'
import marked from 'marked'
import 'highlight.js/styles/monokai-sublime.css'
import { markConfig } from './config'


export default function Home(list) {
  // 初始化文章列表
  const [mylist, setMylist] = useState(list.data)

  // markdown语法配置
  markConfig
  return (
    <>
      <div>
        <Head>
          <title>Home</title>
        </Head>
      </div>
      <Header></Header>
      <Row className="comm_main" type="flex" justify="center">
        <Col className="comm_left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={<div>最新日志</div>}
            itemLayout="vertical"
            dataSource={mylist}
            renderItem={item => (
              <List.Item>
                <div className="list_title">
                  <Link href={{ pathname: './detail', query: { id: item.id } }}>
                    <a>{item.title}</a>
                  </Link>
                </div>
                <div className="list_icon">
                  <span><CalendarOutlined /> {rTime(item.addTime)}</span>
                  <span><FolderOutlined /> {item.typeName} </span>
                  <span><FireOutlined /> {item.view_count}人</span>
                </div>
                <div className="list_context"
                  // 以markdown语法输出文章简介
                  dangerouslySetInnerHTML={{ __html: marked(item.introduce) }}
                ></div>
              </List.Item>
            )}
          ></List>
        </Col>
        <Col className="comm_right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          {/* <Advert></Advert> */}
        </Col>
      </Row>
      <Footer></Footer>
    </>
  )
}


// 请求首页数据
Home.getInitialProps = async () => {
  const promise = new Promise((resolve, reject) => {
    get(servicePath.getIndexList)
      .then((res) => {
        // console.log(res.data, '++++++++');
        resolve(res.data)
      })
      .catch((err) => {
        reject(err)
      })
  })
  return await promise
}
